<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body id="body">
    <!-- <button style="display: none;" id="open">开灯</button>
    <button id="close">关灯</button> -->
    <button id="btn">关灯</button>
</body>
<script>
    // 获取元素注册事件
    var body = document.getElementById('body')
    var open = document.getElementById('open');
    var btn = document.getElementById('btn');
    var close = document.getElementById('close');
    // console.log(btn)
    // 根据变量改变事件
    // var Flag = true;
    // btn.onclick = function(){
    //     if(Flag){
    //         body.style.background = 'black';
    //         Flag = !Flag;
    //     }else{
    //         body.style.background = '';
    //         Flag = !Flag;
    //     }
    // }
    // 根据属性改变事件
    btn.onclick = function(){
        console.log('点击')
       if(btn.innerText == '关灯'){
           btn.innerText = '开灯';
           body.style.background = 'black';
       }else{
           btn.innerText = '关灯';
           body.style.background = '';
       }
    }
    // 关灯事件
    // close.onclick = function(){
    //     body.style.background = 'black';
    //     this.style.display = 'none';
    //     open.style.display = 'block';
    // }
    // // 开灯事件
    // open.onclick =function(){
    //     body.style.background = 'skyblue';
    //     this.style.display = 'none';
    //     close.style.display = 'block';
    // }
</script>
</html>